<template>
	<div class="container">
		<!-- 左侧 -->
		<tree-project
			class="left-content"
			menu-code="rc/tag/course-list"
			@choose="chooseProject"
			:default-checked="true"
		/>
		<!-- 右侧 -->
		<ve-content class="right-content">
			<ve-filtrate
				ref="queryForm"
				:filtrates="queryForm"
				@submit="onQueryForm"
				:search-loading="searchLoading"
			/>

			<ve-operation>
				<el-button
					class="button"
					:disabled="addDisable"
					type="primary"
					@click="addClass"
					v-permiss-code="'rc/tag/course-add'"
				>
					添加系列课
				</el-button>
				<el-tooltip
					class="item"
					effect="dark"
					content="系列可用于快速查询一套课程，并可对一套课程进行排序"
					placement="top-start"
				>
					<img src="../../../assets/images/question.png" alt class="img">
				</el-tooltip>
			</ve-operation>
			<table-data
				v-loading="searchLoading"
				class="table-data"
				@item-detail-info="showItemDetailInfo"
				:table-data="tableData"
				@edit-item-detail="editItemDetail"
				:page="pagination"
				@get-course-page="getCoursePage"
			/>
		</ve-content>
		<!-- 查看详情 -->
		<show-detail
			v-if="showClassFlag"
			:show-class-flag="showClassFlag"
			:show-form="itemDetail"
			@close-show-dialog="closeShowDialog"
		/>
		<!-- 添加或者修改弹窗 -->
		<course-dialog
			:manner="manner"
			:dialog-flag="commonFlag"
			:default-data="defaultData"
			v-if="commonFlag"
			@confirm-fn="successFn"
			@close-dialog="closeFn"
		/>
	</div>
</template>

<script>
	//获取项目树
	import TreeProject from "../../components/async/tree-project.vue";
	import tagApi from "../../../apis/rc/tag.mjs";
	//查看详情
	import ShowDetail from "./components/show-detail.vue";
	//表格
	import TableData from "./components/table-data.vue";
	//查看或者修改弹窗
	import CourseDialog from "./components/course-dialog.vue";
	export default {
		name: "course",
		components: { ShowDetail, TableData, TreeProject, CourseDialog },
		data() {
			return {
				queryForm: [
					{
						type: "input",
						label: "系列课名称",
						key: "name",
						property: { type: "input" },
						default: "",
						placeholder: "请输入"
					},
					{
						type: "filterSelect",
						label: "教学阶段",
						key: "teachRange",
						getData() {
							return (function() {
								let obj = { "": "全部" };
								SyncHttp.getData({ url: "rc/admin/common/teachstages" }).forEach((item) => {
									obj[item.code] = item.name;
								});
								return obj;
							})();
						},
						property: { filterable: false, props: { label: "name", value: "code" } },
						default: ""
					}
				],
				tableData: [], //表单数据
				searchLoading: false, //
				//分页状态
				pagination: {
					pageIndex: 1, //当前页
					pageSize: 10, //每页条数
					pageCount: 1 //共多少页
				},
				selectProject: {
					projectId: "",
					projectName: ""
				}, //左侧筛选的项目名称和项目id
				showClassFlag: false, //是否显示详情页
				itemDetail: {}, //表格中单行详情
				editClassFlag: false, //修改详情页是否显示
				query: {},
				addDisable: true,
				selectedProjectId: "",
				manner: "", //添加或者修改的方式
				defaultData: {},
				commonFlag: false
			};
		},
		watch: {
			selectProject: {
				deep: true,
				handler(newVal) {
					if (newVal.projectAvlstatus === "Y") {
						this.addDisable = false;
					} else {
						this.addDisable = true;
					}
				}
			}
		},
		methods: {
			//初始化
			onQueryForm() {
				this.pagination.pageIndex = 1;
				this.query = this.$refs.queryForm.getResult();
				if (this.selectedProjectId) {
					this.queryTableData();
				}
			},
			//查询
			queryTableData() {
				this.tableData = [];
				let queryParams = {
					projectId: this.selectedProjectId,
					name: this.query.name,
					teachRange: this.query.teachRange,
					pageIndex: PageUtil.getStartIndex(this.pagination),
					pageSize: this.pagination.pageSize
				};
				this.searchLoading = true;
				tagApi.getClassMangerList({
					data: queryParams,
					success: (res) => {
						this.pagination.pageCount = res.count;
						this.tableData = res.data;
					},
					complete: () => {
						this.searchLoading = false;
					}
				});
			},
			//添加系列课
			addClass() {
				this.manner = "add";
				this.defaultData = this.selectProject;
				this.commonFlag = true;
			},
			//点击查看详情
			showItemDetailInfo(row) {
				this.itemDetail = row;
				this.showClassFlag = true;
			},
			//查看详情页关闭
			closeShowDialog() {
				this.showClassFlag = false;
				this.itemDetail = {};
			},
			//修改详情页
			editItemDetail(row) {
				this.manner = "edit";
				this.defaultData.seriesCourseId = row.seriesCourseId;
				this.commonFlag = true;
			},
			//添加或者修改系列课成功
			successFn() {
				this.manner = "";
				this.commonFlag = false;
				this.defaultData = {};
				this.queryTableData();
			},
			//取消添加或者修改系列课
			closeFn() {
				this.manner = "";
				this.commonFlag = false;
				this.defaultData = {};
			},
			//分页查询
			getCoursePage(data) {
				this.pagination = data;
				this.queryTableData();
			},
			//选择项目
			chooseProject(data) {
				this.selectProject.projectId = data.projectId;
				this.selectProject.projectName = data.projectName;
				this.selectedProjectId = data.projectId;
				this.selectProject.projectAvlstatus = data.projectAvlstatus;
				this.onQueryForm();
			}
		},
		created() {
			nlapp.PermissUtil.checkPagePermiss("rc/tag/course-list");
		}
	};
</script>
<style lang="less" scoped>
	.container {
		height: 100%;
        padding-bottom: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        background-color: #f2f2f2;
		display: flex;

		.left-content {
			width: 290px;
            padding: 10px;
            margin-right: 10px;
            box-sizing: border-box;
			height: 100%;
            flex-shrink: 0;
			overflow: auto;
		}
		.right-content {
			height: 100%;
            box-sizing: border-box;
            padding-right: 20px;
            background-color: #fff;
            flex-grow: 1;
            overflow: auto;
		}
		.img {
			position: relative;
			top: 6px;
			left: 4px;
			width: 20px;
			height: 20px;
		}
	}
	.button {
		margin-left: 10px;
	}
	.table-data {
		margin-left: 10px;
	}
</style>
